<template>
  <view>
   <view class="header">
     <view class="back" @click="back()">
       <uni-icons type="left" size="20"></uni-icons>
     </view>
     <text>我的积分</text>
   </view>
    <view class="myIntegral">
      <view class="integralValue">
        积分 ：{{userInfo.integral}}
      </view>
      <view class="getIntegral" @click="goQuestions()">
        答题赢积分 <uni-icons type='right' size="10" color="#fff"></uni-icons>
      </view>
    </view>
    <view class="integralDetail">
      <!-- <uni-section title="积分明细" titleFontSize='36rpx' type="circle"></uni-section>-->
      <view class="integralDetail-title">
        积分明细
      </view>
      <view class="detail-container">
        <block v-for="(item,index) in detailInfo" :key='index'>
          <view class="detail-box">
            <view class="detail-Info">
              <view class="detail-title">
                {{item.decription}}
              </view>
              <view class="detail-time">
                {{item.transactionDate}}
              </view>
            </view>
            <view class="detail-value">
              {{item.pointsChange}}
            </view>
          </view>
        </block>
        <view class="detail-bottom">
          ~到底了~
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        detailInfo: [],
        page: 1,
        pagesize: 10
      };
    },
    created() {
      this.getDetailInfo()
      this.getUserInfo()
    },
    methods: {
      back() {
        uni.navigateBack()
      },
      async getUserInfo() {
        const res = await uni.$http.get(`/users/users/${data.studentId}`)
        this.updateUserInfo(res.data.data)
      },
      async getDetailInfo() {
        const data = await uni.$http.post(`/users/integral/page/${this.userInfo.studentId}`, {
          page: this.page,
          pagesize: this.pagesize
        })
        console.log(data.data.data.records);
        this.detailInfo = data.data.data.records
      },
      goQuestions() {
        uni.navigateTo({
          url: '/subpkg/questions/questions'
        })
      }
    },
    computed: {
      ...mapState('my_user', ['userInfo'])
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #fff;
  }
  
  .header {
    position: relative;
    width: 100%;
    height: 140rpx;
    text-align: center;
    font-size: 36rpx;
    font-weight: 700;
    line-height: 170rpx;
    background-color: #fff;
    
    .back{
      position: absolute;
      top: 4rpx;
      left: 23rpx;
      height: 50rpx;
    }
  }

  .myIntegral {
    width: 94%;
    margin: 0 auto;
    margin-top: 30rpx;
    padding: 30rpx;
    border-radius: 20rpx;
    background-color: #b6eaae;
    color: #fff;
    box-sizing: border-box;

    .integralValue {
      font-size: 40rpx;
    }

    .getIntegral {
      margin-top: 20rpx;
      font-size: 26rpx;
    }
  }

  .integralDetail {
    display: flex;
    flex-direction: column;
    margin-top: 20rpx;

    .integralDetail-title {
      position: relative;
      width: 100%;
      height: 60rpx;
      padding: 0 60rpx;
      line-height: 60rpx;
      font-size: 30rpx;

      &::before {
        content: ' ';
        display: block;
        width: 5px;
        height: 20px;
        background-color: #b6eaae;
        position: absolute;
        left: 20rpx;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    .detail-container {
      width: 94%;
      margin: 0 auto;
      padding: 30rpx;

      .detail-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1rpx solid #eee;
        padding: 30rpx;

        .detail-Info {
          display: flex;
          flex-direction: column;
          width: 550rpx;

          .detail-title {
            font-size: 28rpx;
            color: #555;
          }

          .detail-time {
            margin-top: 10rpx;
            font-size: 26rpx;
            color: #999;
          }
        }

        .detail-value {
          padding: 20rpx;
          color: #b6eaae;
          text-align: center;
          font-size: 30rpx;

        }
      }

      .detail-bottom {
        padding: 40rpx;
        border-top: 1rpx solid #eee;
        color: #888;
        font-size: 36rpx;
        text-align: center;
      }
    }
  }
</style>